<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-icons/bootstrap-icons.css">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/bootstrap.bundle.js"></script>
</head>
<style>
    #header-hei {
        font-size: 14px;
    }

    #header-tui {
        font-size: 12px;
        padding-top: 8px;
        padding-bottom: 0px;
    }

    .btn {
        border-radius: 25px;
        font-size: 15px;

    }

    #wenzi {
        font-size: 12px;

    }

    #toutou {
        font-size: 10px;
    }

    #oi {
        font-size: 10px;
    }
</style>

<body>
    <div style="background-color: #1f1f1f; ">
        <div class="container w-100 " id="header-hei">
            <ul class="class ">
                <div class="row d-flex justify-content-between">
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                            href="22.html">我的音乐</a></li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                            href="">发现音乐</a></li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white" href="">关注</a>
                    </li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white" href="">商城</a>
                    </li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                            href="">音乐人</a></li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white" href="">推歌</a>
                    </li>

                    <!--搜索框-->
                    <form class="form-inline my-4 mx-3 my-lg-0">
                        <div class="input-group-append" style="margin-top: 9px;">
                            <input class="form-control mr-sm-2 " style="margin-top: 9px;" type="search "
                                placeholder="搜索" aria-label="Search">

                            <button class=" btn btn-outline my-sm-0 border-white text-white"><small>创作者中心</small>
                            </button>
                            <button class=" btn btn-outline  my-sm-1 border-auto text-white">
                                <small><a class="text-white " style="margin-top: 9px;" href="denglu.html">登录</a></small>
                            </button>
                    </form>
                </div>
            </ul>
        </div>
        <!--推荐栏-->
        <div style="background-color: #b30404; ">
            <div class="container justify-content-between " id="header-tui">
                <div class="row bg-auto">
                    <ul class="class">
                        <li class="list-inline-item  px-5"><a class="text-white" href="">推荐</a>
                        </li>
                        <li class="list-inline-item  px-5"><a class="text-white" href="">排行榜</a>
                        </li>
                        <li class="list-inline-item  px-5"><a class="text-white" href="">歌单</a>
                        </li>
                        <li class="list-inline-item  px-5"><a class="text-white" href="">播客</a>
                        </li>
                        <li class="list-inline-item  px-5"><a class="text-white" href="">歌手</a>
                        </li>
                        <li class="list-inline-item  px-5"><a class="text-white" href="">新碟上架</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--图片大头-->


    <div class="container mt-1 bg-light border">
        <div class="container mt-4">
            <div class="row">
                <div class="col-9">
                    <div class="row">
                        <div class="col-4">
                            <div class="card mb-5 border-0">
                                <img src="https://p1.music.126.net/wNjMSIcKWgWtb7t9a6Jk1Q==/109951170731153982.jpg?param=200y200"
                                    class="card-img-top" alt="...">
                            </div>
                        </div>
                        <div class="col-8">
                            <h4><i class="bi bi-skip-forward mx-2"></i>春核美学 | 绿意 盎然 鲜活 旺盛 生命力</h4>
                            <div class="media">
                                <img src="http://p1.music.126.net/6tQU47oYKZklE_lBjBVb9Q==/109951170958800480.jpg?param=40y40"
                                    class="mr-3 w-10" alt="...">
                                <div class="media-body">
                                    <p class="mt-0 small text-info my-2">凌晨一点的莱茵猫</p>
                                    <p class="text small text-secondary" id="oi">2024-04-17创建</p>
                                    <div class="mx-0 small position-relative" style="right:60px">
                                        <button type="button" class="btn btn-primary btn-lg px-4"><i
                                                class="bi bi-skip-end-circle"></i>播放<i class="bi bi-plus"></i></button>
                                        <button type="button" class="btn btn-outline-secondary px-2"><i
                                                class="bi bi-folder-plus"></i>（969）</button>
                                        <button type="button" class="btn btn-outline-secondary px-2"><i
                                                class="bi bi-box-arrow-up-right"></i>（99）</button>
                                        <button type="button" class="btn btn-outline-secondary px-2"><i
                                                class="bi bi-download"></i>下载</button>
                                        <button type="button" class="btn btn-outline-secondary px-2"><i
                                                class="bi bi-chat-left-text"></i>（24）</button>
                                    </div>
                                    <div class="my-4 position-relative small text-secondary px-3" style="right:55px">
                                        <div class="">
                                            <p>标签:
                                                <button type="button"
                                                    class="btn btn-outline-secondary px-1 mx-1 py-0"><small>轻音乐</small></button>
                                                <button type="button"
                                                    class="btn btn-outline-secondary px-1 mx-1 py-0"><small>流行</small></button>
                                                <button type="button"
                                                    class="btn btn-outline-secondary px-1 mx-1 py-0"><small>清新</small></button>
                                            </p>
                                        </div>
                                        <p>介绍： 梦过那绵延不尽的草原，<br>
                                            一望无际奔腾的溪流，<br><br>

                                            鸟儿藏于草丛之间觅食寻偶<br>
                                            蝶儿成双，舞起翩翩.<br><br>

                                            轻轻一嗅，鼻腔间充满初春气息，<br>
                                            正像朱自清先生所说<br><br>

                                            “混着青草味儿还有各种花的香，<br>
                                            都在微微润湿的空气...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="border-bottom border-danger">
                                <h5><strong>热门推荐</strong></h5>
                            </div>
                            <div class="col border">
                                <ul class="nav nav-tabs">
                                    <li class="nav-item my-2">
                                        <a class="nav-link active" href="#">歌曲标题</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link disabled my-2">歌手</a>
                                    </li>
                                </ul>
                                <table
                                    class="table table-striped table-sm table-borderless small text-left text-secondary">
                                    <tr class="table-secondary"></tr>
                                    <tr>
                                    <tr class="table-secondary">
                                        <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                            Rain affter Summer
                                        </td>
                                    </tr>
                                    <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                        inspire
                                    </td>
                                    <tr class="table-secondary">
                                        <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                            Hyacinth
                                        </td>
                                    </tr>

                                    <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                        my soul
                                    </td>
                                    <tr class="table-secondary">
                                        <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                            Best Moments
                                        </td>
                                    </tr>

                                    <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                        Lost Love
                                    </td>

                                    <tr class="table-secondary">
                                        <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                            beyond the memory
                                        </td>
                                    </tr>


                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <!--热门推荐栏-->
                    <div class="col my-2">
                        <p class="text my-3 border-bottom border-dark" id="wenzi">
                            <strong>喜欢这个歌单的人</strong>
                        </p>
                    </div>
                    <div class="col d-flex px-3">
                        <div class="media">
                            <img src="http://p1.music.126.net/rFvYkWlNtlg5pLiPwn48qw==/109951169979207266.jpg?param=40y40"
                                alt="">
                        </div>
                        <div class="media px-3">
                            <img src="http://p1.music.126.net/hIxjU9RvE5mURn3udv9Rgw==/18896206835303227.jpg?param=40y40"
                                alt="">
                        </div>
                        <div class="media">
                            <img src="http://p1.music.126.net/ntVMmleK3mtMUYwYEz73jg==/109951166994331268.jpg?param=40y40"
                                alt="">
                        </div>
                        <div class="media px-3">
                            <img src="http://p1.music.126.net/ZJFHnaFF9q8YoFMaxdRTcw==/109951167535367961.jpg?param=40y40"
                                alt="">
                        </div>

                    </div>

                    <div class="col d-flex px-3 my-2">
                        <div class="media">
                            <img src="http://p1.music.126.net/dmWxs48aAR43nbT0UKLEEg==/109951164614607365.jpg?param=40y40"
                                alt="">
                        </div>
                        <div class="media px-3">
                            <img src="http://p1.music.126.net/BnKOwUBzDrUoCjLFnA6Rnw==/109951170517130638.jpg?param=40y40"
                                alt="">
                        </div>
                        <div class="media">
                            <img src="http://p1.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg?param=40y40"
                                alt="">
                        </div>
                        <div class="media px-3">
                            <img src="http://p1.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg?param=40y40"
                                alt="">
                        </div>
                    </div>
                    <div class="col my-5" id="wenzi">
                        <p class="text border-bottom border-dark">
                            <strong>相关推荐</strong>
                        </p>
                        <div class="media">
                            <img src="http://p2.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62"
                                class="mr-3 w-25" alt="...">
                            <div class="media-body">
                                <h6 class="mt-0">张惠妹aMEI</h6>
                                <p><small>台湾歌手张惠妹</small>
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <img src="http://p2.music.126.net/1gNcBmzdIaQtU00Dvp_TvQ==/109951163912081772.jpg?param=50y50"
                                class="mr-3 w-25" alt="...">
                            <div class="media-body">
                                <h6 class="mt-0">好听到单曲循环</h6>
                                <p><small>by 酒酒无牵挂</small>
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <img src="http://p2.music.126.net/pAGryDx8kzVIrlqIzsQcxA==/109951163136051353.jpg?param=50y50"
                                class="mr-3 w-25" alt="...">
                            <div class="media-body">
                                <h6 class="mt-0">人这一辈子...</h6>
                                <p>by mayuko然
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <img src="http://p1.music.126.net/iy7L0RHu_mHhQ6EMLvbf0A==/109951164226850851.jpg?param=50y50"
                                class="mr-3 w-25" alt="...">
                            <div class="media-body">
                                <h6 class="mt-0">【失恋必听】你...</h6>
                                <p><small>by 宇杰感情君</small>
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <img src="http://p2.music.126.net/RGN9oiZjAhUDJc-WbmbZZw==/109951169384744805.jpg?param=50y50"
                                class="mr-3 w-25" alt="...">
                            <div class="media-body">
                                <h6 class="mt-0">热歌传递|耳朵</h6>
                                <p><small>by MUSIC-BANG</small>
                                </p>
                            </div>
                        </div>


                    </div>

                    <h6 class="mx-3"><strong>热门主播</strong></h6>
                    <ol class="breadcrumb bg-white small">
                        <li class="breadcrumb-item"><a href="#" class="text-info small">陈立</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">刘维，Julius</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">墨菲定律乐团</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">嘴碎许美达</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">银临Rachel</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">王子欣童</a></li>
                    </ol>
                </div>


            </div>
        </div>

    </div>
    <!--尾栏-->
    <div style="background-color: #444444;">
        <div class="container py-3">
            <div class="col d-flex justify-content-center text-secondary" id="weiwei"><small>
                    <p> 服务条款| 隐私政策| 儿童隐私政策| 版权投诉| 投资者关系| 广告合作 |联系我们</p>
                    <div class="col d-flex justify-content-center text-white" id="weiwei"><small>
                    </div>
                    <p>互联网宗教信息服务许可证：浙（2022）0000120 增值电信业务经营许可证：浙B2-20150198 粤B2-20090191-18 浙ICP备15006616号-4
                        工业和信息化部备案管理系统网站
                    </p>
            </div>
            </small>
        </div>
    </div>

</body>

</html>